<template>
<!-- 详细资讯内容 -->
  <article>
    <div class="picsbox">
      <!--banner start-->
      <FirstRecommend></FirstRecommend>
      <!--banner end-->
    </div>
    <h1 class="t_nav">
      <p class="n1" v-if="temp.value == newsDetail.category" v-for="temp in categoryList" v-text="temp.category"></p>
        <div class="rt">当前位置：
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/info',query:{category:newsDetail.category} }">资讯列表</el-breadcrumb-item>
            <el-breadcrumb-item >资讯详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
    </h1>
    <div class="articles">
      <div class="newsview">
        <h3 class="news_title" v-if="newsDetail">{{newsDetail.title}}</h3>
        <div class="bloginfo" v-if="newsDetail">
          <ul>
            <li class="author">
              <span class="iconfont">&#xe60f;</span>
              {{newsDetail.createBy}}作者：太阳花幼儿园
            </li>
            <li class="lmname">
              <span class="iconfont">&#xe603;</span>
              <a
                href="javascript:void(0);"
                v-if="temp.value == newsDetail.category" v-for="temp in categoryList" v-text="temp.category"
              ></a>
              来源：太阳花幼儿园
            </li>
            <li class="createTime">
              <span class="iconfont">&#xe606;</span>
              {{newsDetail.createTime}}
            </li>
            <li class="view">
              <span class="iconfont">&#xe8c7;</span>
              {{newsDetail.views}}浏览520次
            </li>
          </ul>
        </div>
        <div
          class="news_con ck-content"
          v-html="newsDetail.content"
          v-highlight
        ></div>
      </div>
    </div>
  </article>
</template>

<script>
import FirstRecommend from '../components/FirstRecommend'
import request from '../utils/request'

export default {
  name: 'info',
  data () {
    return {
      url:{
        newsDetail:'/sunNews/queryById',
        category: "/sunCategory/list",
      },
      newsDetail:{},
      categoryList:[],
    }
  },
  computed: {

  },
  components: {
    // 注册组件
    FirstRecommend,
  },
  watch: {
    $route (to, from) {
      location.reload()
    }
  },
  mounted () {
  
  },
  created () {
    //根据路由id去请求新闻详情
    this.getNewsList(this.$route.query.id)
    //获取分类列表
    this.getCategoryList()
  },
  methods: {
    //获取分类表
    getCategoryList () {
      request.get(this.url.category)
        .then((res) => {
          if (res.data.success) {
            // console.log(res.data.result)
            this.categoryList = res.data.result.records
            console.log(this.categoryList)
          }
        }).catch((error)=>{
        console.log(error)
      })
    },

    //根据id获取新闻
    getNewsList (id) {
      request.get(this.url.newsDetail,{
        params:{
          id:id,
        }
      })
        .then((res) => {
          if (res.data.success) {
            console.log(res.data.result)
            this.newsDetail = res.data.result
          }
        }).catch((error)=>{
        console.log(error)
      })
    },

    // 切割字符串
    subText: function (str, index) {
      if (str.length < index) {
        return str
      }
      return str.substring(0, index) + '...'
    }
  }
}
</script>

<style>
.newsview{
  text-align: center;
}
.articles .news_con p {
    text-indent: 2em;
}
</style>
